<template src="./template.html"></template>

<script>
/* global moment */
import LayoutToEdit from '../layout'
import MenusMini from 'components/menus'
import { menuData, PRACTICE_PROJECT } from './consts'
import { getExercise } from '../models'
import dayjs from 'dayjs'

export default {
  components: { LayoutToEdit, MenusMini },
  data() {
    return {
      PRACTICE_PROJECT,
      activeTab: 'lesson',
      exerciseList: []
    }
  },
  computed: {
    courseId() {
      return this.$route.params.courseId
    },
    newMenus() {
      return menuData.map(it => ({
        ...it,
        isActive: it.path === this.activeTab
      }))
    },
    infos() {
      return this.$store.state.pageStatusInfo.courseLayoutInfoData || { courseIntroduction: '', lessons: [] }
    }
  },
  methods: {
    $goStudyLessonPage(it) {
      // lessonId
      this.$router.push({
        name: 'curriculum.lesson.intro',
        params: {
          courseId: this.courseId
        },
        query: {
          lessonId: it.lessonId
        }
      })
    },
    $tabToggle(tab) {
      this.activeTab = tab.path
    },
    $goPractice() {
      this.$router.push({ name: 'exercise.list.index' })
    },
    $goReport(item) {
      this.$router.push({ name: 'exercise.list.report', query: { exerciseId: item.exerciseId, lessonName: item.lessonName, lessonId: item.lessonId, courseId: this.courseId, exerciseType: item.exerciseType } })
    },
    async $getExercise() {
      try {
        const { data } = await getExercise({ courseId: this.courseId })
        this.exerciseList = (data || []).map(it => ({
          ...it,
          finishTime: it.finishTime && moment(it.finishTime).format('YYYY-MM-DD HH:mm')
        }))
      } catch (error) {
        this.$message.error(error.message || '获取练习记录失败，请稍后重试')
      }
    },
    getTimeStr(time) {
      if (time) {
        // 格式化时间
        return dayjs(time).format('YYYY-MM-DD HH:mm')
      } else return '--'
    }
  },
  mounted() {
    this.$getExercise()
  }
}
</script>
